<template>
  <div id="RTreenode">
    <li>
      <div @mousedown="toggle()" :style="itemStyle">
      <slot name="prepend"></slot>
      {{ text }}
      </div>
      <ul v-if="isdir" v-show="show">
        <r-treenode
          v-for="item in items"
          :key="item[itemkey]"
          :rkey="item[itemkey]"
          :text="item[itemtext]"
          :items="item.children"
          :isdir="item.isdir"
          :level="level+1"
        >
            <template v-slot:prepend>
                <slot name="prepend"></slot>
            </template>
        </r-treenode>
      </ul>
    </li>
  </div>
</template>

<script>
export default {
    name:"RTreenode",
    data() {
       return {
            tree: { changed: false }, // 用来监听 tree 数据是否变化。绑定到根的 RTree 节点
            open: {},
            mousehover: {},
            show: false,
            active: false,
       }
    },
    props:{
        items:{
            type:Array
        },
        rkey:{type:String},
        text:{type:String},
        // 每个单元唯一的键值,在 item中的这个字段
        isdir: {type:Boolean},
        hoverable: {type:Boolean},
        color: {type:String },
        activatable:{
            type:Boolean
        },
        level:{
            type:Number,
            default:0
        }
    },
    computed:{
        // 静态计算样式
        itemStyle() {
                let actived = ""
                if(this.active) {
                    actived = this.tree.getData("active", this.rkey)?"background:#eee;":""
                }
                let pdleft = "padding-left:" + this.level * 12 + "px;"
                return  actived + pdleft
        } ,
        itemtext() { return this.tree.$props.itemtext },

        itemkey() { return this.tree.$props.itemkey },
    },
    methods:{
        toggle() {
            this.tree.toggleShow(this.rkey)
            this.invokeEvent("nodeclick")
        },
        // 初始化当前节点的状态
        registerStore(){
            this.tree.store.show[this.rkey] = true
        },
        updateStatus() {
            this.show = this.tree.getData("show", this.rkey)
            this.active = this.tree.getData("active", this.rkey)
        },
        invokeEvent(event) {
            switch(event) {
                // 点击节点
                case 'nodeclick': 
                this.tree.$emit("nodeclick")
                break;
                
            }
        }
    },
    created() {
        const parent = this.$parent;

        if(parent.isTree) {
            this.tree = parent
        } else {
            this.tree = parent.tree
        }

        console.log(this.tree)
        this.registerStore()
    },
    // 手动判断是否发生变化
    // 初始化 watch 对象时，将会注册该属性的所有值。
    watch: {
        'tree.change':  {
            handler() {
                console.log("updateShow")
                this.updateStatus()
            },
            deep: true
        }
    }
}
</script>

<style lang="scss" scoped>
#RTreenode {
  user-select: none;
  ul,
  li {
    list-style: none;
    padding: 0;
  }
  li > div:hover {
    background: #f0f0f0;
  }
}
</style>
